// Copyright (C) 2017 Nokia

@import "../../../styles/colors";

$WF-shadow: 3px -3px #c0c0c0;
$selected-shadow: 0 4px 8px 0px rgba(0, 0, 0, .35);

@mixin transitions($attributes...) {
  $transitions: "";
  @each $attr in $attributes {
    $transitions: $transitions + $attr + " .25s ease-in-out, ";
  }

  transition: unquote($transitions);
}

#graph-container {
  position: relative;
}

.task {
  width: 165px;
  height: 65px;
  border: 1px solid $border;
  background-color: #fff;
  position: absolute;
  border-radius: 4px;
  @include transitions(border-color, box-shadow);
  will-change: border-color, box-shadow, top, left;

  .task-content {
    padding: .5rem;
    @include transitions(filter, opacity);
    will-change: filter, opacity;
  }

  .task-name {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1.6;
  }
}

.task:not(.inPath) .task-content {
  filter: grayscale(1);
  opacity: .35;
  background-color: #C2C2C2;
}

.task.WORKFLOW {
  box-shadow: $WF-shadow;
}

.task.selected {
  border-width: 2px;
  box-shadow: $selected-shadow;
  outline: none;

  .task-name {
    font-weight: 600;
  }
}

.task.WORKFLOW.selected {
  // workaround for box-shadow override
  box-shadow: $selected-shadow, $WF-shadow;
}

$state-colors: (SUCCESS: $entity-success, ERROR: $entity-error, COMPLETE: $entity-completed, RUNNING: $entity-running);

// set hover color on tasks
@each $state, $color in $state-colors {
  .task.#{$state}:hover {
    border-color: $color;
  }
}

// set selected task style
@each $state, $color in $state-colors {
  .task.#{$state}.selected {
    border-color: $color;
  }
}

// edges colors - currently disabled due to https://github.com/jsplumb/jsPlumb/issues/647
@each $state, $color in $state-colors {
  /deep/svg.jtk-connector.edge-#{$state} {
    path:nth-child(1) {
      // edge path
      stroke: $color;
      stroke-width: 2px;
    }

    path:nth-child(2) {
      // arrow
      fill: $color;
    }
  }
}

/deep/.jtk-overlay.edge-overlay {
  padding: 2px 5px;
  font-size: 10px;
  color: #fff;
  border-radius: 3px;
  opacity: 1;
  @include transitions(opacity);

  &:not(.inPath) {
    //opacity: 0;
    filter: grayscale(1) brightness(1.8);
  }
}

// edge overlays (label)
@each $state, $color in $state-colors {
  /deep/.jtk-overlay.edge-overlay.#{$state} {
    background-color: $color;
  }
}
